<template>
	<view class="tabbar_pages">
		<view class="uni-tabbar">
			<view class="tababr_item tabbar_find" v-for="(item,index) in tabbarList" :key="index"
				@click="tabbarSave(item,index)">
				<!-- 旋转动画 -->
				<view class="find_icon" v-if="item.flag">
					<div class="spinner">
						<div class="spinner1">
						</div>
					</div>
					
					<!-- 每日精选 -->
					<view class="rotate-icon">
						<view class="icon-active" v-if="item.pagePath == pagePath">
							<text class="rotate-icon iconfont color-lvse" :class="item.icon"></text>
						</view>
						<text class="rotate-icon iconfont" :class="item.icon" v-else></text>
					</view>
				</view>
				
				<!-- 其他tabbar -->
				<view class="tabbar_icon" v-else>
					<view class="icon-active" v-if="item.pagePath == pagePath">
						<text class="select-icon  iconfont" :class="[item.icon,item.sizeFlag ? 'size-icon' :'']"></text>
					</view>
					<text class="tabbar-icon iconfont " :class="[item.icon,item.sizeFlag ? 'size-icon' :'']" v-else></text>
				</view>

				<view class="tababr_text" :class="item.pagePath == pagePath?'textActive':''">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		props: {
			isShowNums: {
				default: true,
				type: Boolean
			},
			pagePath: {
				default: '',
				type: String
			}
		},
		data() {
			return {
				page: '',
				tabbarList: [{
						pagePath: "pages/index/index",
						text: "首页",
						icon: "icon-shouye2",
					},
					{
						pagePath: "pagesB/divideClass/divideClass",
						text: "分类",
						icon: "icon-faxian2",
					},
					{
						pagePath: "pagesCenter/handpick/handpick",
						text: "每日精选",
						icon: "icon-xihuan-01",
						flag: true,
					},
					{
						pagePath: "pagesC/discover/discover",
						text: "Q图",
						icon: "icon-yuyin",
						sizeFlag:true,
					},
					{
						pagePath: "pagesD/user/user",
						text: "我的",
						icon_select: "../../static/tabbar/select_my.png",
						icon: "icon-xiazai4",
					}
				]
			};
		},
		methods: {
			tabbarSave(e, index) {
				this.page = e.pagePath
				uni.switchTab({
					url: '/' + e.pagePath
				});
			},
		}
	}
</script>


<style lang="scss">
	.uni-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: space-around;
		height: 100upx;
		height: calc(100upx + env(safe-area-inset-bottom)) !important;
		padding-bottom: calc(env(safe-area-inset-bottom)) !important;
		box-sizing: border-box;
		backdrop-filter: blur(3px); //毛玻璃效果
		box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
		// box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);

		.tabbar_find {
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.find_icon {
				margin-top: -30px;
				display: flex;
				align-items: center;
				justify-content: center;

				// 旋转动画
				.spinner {
					background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(243, 107, 255, 1.0) 17.8%, rgba(2, 245, 255, 1) 100.2%);
					width: 70rpx;
					height: 70rpx;
					animation: spinning82341 2s linear infinite;
					text-align: center;
					border-radius: 50%;
					filter: blur(1rpx);
					margin-bottom: 15rpx;
					box-shadow: 0rpx -10rpx 30rpx 0rpx  rgba(243, 107, 255, 1.0), 0rpx 10rpx 30rpx 0rpx rgba(2, 245, 255, 1);
				}

				.spinner1 {
					background-color: rgb(36, 36, 36);
					width: 70rpx;
					height: 70rpx;
					border-radius: 50rpx;
					filter: blur(3.5rpx);
				}

				@keyframes spinning82341 {
					to {
						transform: rotate(360deg);
					}
				}

				// 旋转动画中的图标
				.rotate-icon {
					position: absolute;
					top: -10rpx;
					left: 30rpx;
					text-align: center;
					.rotate-icon{
						font-size: 36rpx;
					}
				}
			}
		}

		.tababr_item {
			font-size: 20rpx;
			text-align: center;
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.tabbar_icon {
				height: 25px;
				width: 25px;

				.select-icon {
					color: #24bfa5;
					font-size: 34rpx;
				}

				.tabbar-icon {
					color: #fff;
					font-size: 34rpx;

				}
				.size-icon{
					font-size: 40rpx;
				}
			}

			.tababr_text {
				line-height: 24rpx;
				font-size: 24rpx;
				margin-top: 2px;
				color: #fff;
			}

			.textActive {
				color: #24bfa5;
			}
		}
	}
	
	/* 点击动画 start */
	.icon-active {
		animation: tabbar-item-button-click 0.5s forwards 1;
	}

	@keyframes tabbar-item-button-click {
		from {
			transform: scale(0.5);
		}

		to {
			transform: scale(1);
		}
	}
</style>